<style scoped>
.ivu-modal {
  top: 10px !important;
}
</style>
<template>
  <div>
    <Form ref="formData" :model="formData" :rules="ruleInline" :label-width="120">
      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="batchName" label="批次名称">
             <Input type="text" disabled v-model="formData.batchName" placeholder="hkuser" :clearable="true" />
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem prop="sourceTableName" label="抽取对象">
            <Input type="text" v-model="formData.sourceTableName" placeholder="hkuser" :clearable="true" />
          </FormItem>
        </Col>
      </Row>


      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="targetTableName" label="目标表">
            <Input type="text" v-model="formData.targetTableName" placeholder="hkuser" :clearable="true" />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem prop="tableName1" label="备份表">
            <Input
              type="text"
              v-model="formData.tableName1"
              placeholder="hkuser"
              :clearable="true"
            />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="tableName2" label="临时表">
            <Input
              type="text"
              v-model="formData.tableName2"
              placeholder="hkuser"
              :clearable="true"
            />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem prop="tableComment" label="表描述">
            <Input type="text" v-model="formData.tableComment" placeholder="项目表" :clearable="true" />
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="8">
        <Col span="6">
          <FormItem prop="commitsize" label="抽取单位">
            <InputNumber :max="10000" :min="1" :step="1000" v-model="formData.commitsize" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="定时抽取" style="margin-left:20px;float:left;">
            <i-switch size="large" :before-change="handleBeforeChange" v-model="flag">
              <span slot="open">ON</span>
              <span slot="close">OFF</span>
            </i-switch>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem
            v-if="this.selected.execFlag!=0"
            label="重新抽取"
            style="margin-left:20px;float:left;"
          >
            <Button type="primary" @click="resetEtlState()" size="small" :ghost="this.ghost">重置抽取进度</Button>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="32">
        <Col span="12">
          <FormItem prop="sql2" label="转换sql1">
            <Input type="textarea" v-model="formData.sql2" placeholder="alert * " :autosize="true" />
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem prop="sql3" label="转换sql2">
            <Input type="textarea" v-model="formData.sql3" placeholder="alert *" :autosize="true" />
          </FormItem>
        </Col>
      </Row>

      <FormItem prop="sql4" label="转换sql3">
        <Input type="textarea" v-model="formData.sql4" placeholder="alert *" :autosize="true" />
      </FormItem>
      <FormItem prop="sql1" label="查询语句">
        <Input
          type="textarea"
          v-model="formData.sql1"
          placeholder="select * from xxx"
          :autosize="true"
        />
      </FormItem>
      <FormItem>
        <Button type="info" @click="excuteSql('formData')" :style="{marginRight:'5px'}">执行SQL</Button>
        <Button type="success" @click="handleSubmit('formData')">保存</Button>
      </FormItem>
    </Form>
    <Spin fix v-show="addLoading"></Spin>
    <Modal v-model="modal" title="查询结果集"  width="100%" :mask-closable="false" style="top:10px;">
      <ExcuteResult
        v-if="modal"
        v-on:func="closeModal"
        :resultSet="this.resultSet"
        :tableName="this.formData.sourceTableName"
        :sysName="this.formData.sourceDbSysname"
        :menuTheme="menuTheme"
      />
      <div slot="footer" :style="{color:'#808695',fontSize:'12px',textAlign:'center'}">温馨提示：只返回20条数据</div>
      <Button type="success" style="float:right;" @click="handleSubmit('formData')">保存</Button>
    </Modal>
  </div>
</template>
<script>
import ExcuteResult from "./executeResult";
export default {
  name: "Update",
  props: {
    menuTheme: String,
    selected: Object
  },
  components: { ExcuteResult },
  data() {
    return {
      addLoading: false,
      ghost: false,
      flag: this.selected.flag === 1 ? true : false,
      formData: {

        kid: this.selected.kid,
        batch: this.selected.batch,
        batchName: this.selected.batchName, 
        sourceDbId: this.selected.sourceDbId,
        targetDbId: this.selected.targetDbId,
        sql1: this.selected.sql1,
        sql2: this.selected.sql2,
        sql3: this.selected.sql3,
        sql4: this.selected.sql4,
        sourceTableName: this.selected.sourceTableName,
        targetTableName: this.selected.targetTableName,
        tableName1: this.selected.tableName1,
        tableName2: this.selected.tableName2,
        flag: this.selected.flag,
        commitsize: this.selected.commitSize,
        tableComment: this.selected.tableComment
      },
      ruleInline: {
        sourceDbId: [
          {
            type: Number,
            required: true,
            message: "系统名称不能为空",
            trigger: "blur"
          }
        ],
        sql2: [
          {
            required: true,
            message: "转换语句1不能为空",
            trigger: "blur"
          }
        ],
        sql3: [
          {
            required: true,
            message: "转换语句2不能为空",
            trigger: "blur"
          }
        ],
        sql4: [
          {
            required: true,
            message: "转换语句3不能为空",
            trigger: "blur"
          }
        ],
        sql1: [
          {
            required: true,
            message: "查询语句不能为空",
            trigger: "blur"
          }
        ],
        sourceTableName: [
          {
            required: true,
            message: "对象不能为空",
            trigger: "blur"
          }
        ],
        targetTableName: [
          {
            required: true,
            message: "目标表不能为空",
            trigger: "blur"
          }
        ],
        tableName1: [
          {
            required: true,
            message: "备份表不能为空",
            trigger: "blur"
          }
        ],
        tableName2: [
          {
            required: true,
            message: "临时表不能为空",
            trigger: "blur"
          }
        ],
        tableComment: [
          {
            required: true,
            message: "表描述不能为空",
            trigger: "blur"
          }
        ]
      },
      batchList: [],
      databaseList: [],
      modal: false,
      resultSet: []
    };
  },
  methods: {
    //提交表单加校验表单
    handleSubmit(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.addLoading = true;
          const result = await this.$api.updateTask(this.formData);
          this.addLoading = false;
          if (result.code === 1) {
            this.$Message.success("修改成功!");
            this.$emit("fun");
          } else {
            this.$Message.error(result.errMsg);
          }
        }
      });
    },
    //查询批次列表
    async getBatchList() {
      const data = { pages: 1, sizes: 9999 };
      const result = await this.$api.getEtlBatchList(data);
      if (result.code === 1) {
        this.batchList = result.data.list;
        console.log("查询批次列表");
        console.log(this.batchList);
      }
    },
    //获取数据库列表
    async getEtlDBList(pages) {
      const sizes = 200;
      const data = {
        pages:1,
        sizes:200
      };
      const result = await this.$api.getEtlDBList(data);
      this.loading = false;
      if (result.code === 1) {
        this.databaseList = result.data.list;
        
        console.log("获取数据库列表");
        console.log(this.databaseList);
      }
    },
    //执行sql
    async excuteSql(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.addLoading = true;
          const data = {
            batch: this.formData.batch,
            tableName: this.formData.sql1
          };
          const result = await this.$api.executeSql(data);
          this.addLoading = false;
          if (result.code === 1) {
            this.$Message.success("执行成功!");
            this.resultSet = result.data;
            this.modal = true;
          } else {
            this.$Message.error(result.errMsg);
          }
        }
      });
    },
    handleBeforeChange() {
      return new Promise(resolve => {
        this.$Modal.confirm({
          title: "切换确认",
          content: "您确认要切换任务状态吗？",
          onOk: () => {
            if (this.flag) {
              this.formData.flag = 0;
            } else {
              this.formData.flag = 1;
            }
            resolve();
          }
        });
      });
    },
    //重置抽取状态
    resetEtlState() {
      this.formData.execFlag = 0;
      this.ghost = true;
    },
    //关闭结果集modal
    closeModal() {
      this.modal = false;
    }
  },
  mounted() {
    console.log(this.selected);
    this.getBatchList();
    this.getEtlDBList();
  }
};
</script>